{% extends "base.html" %}

{% block title %}风险分析结果 - 告警系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="fw-bold text-primary">风险分析结果</h1>
    <div>
        <button class="btn btn-outline-secondary me-2" onclick="location.reload()">
            <i class="bi bi-arrow-clockwise"></i> 刷新
        </button>
    </div>
</div>

<!-- 风险统计卡片 -->
<div class="row mb-4">
    <div class="col-md-2">
        <div class="card bg-danger text-white">
            <div class="card-body text-center">
                <h4 class="card-title">{{ risk_stats.get('超高风险', 0) }}</h4>
                <p class="card-text">超高风险</p>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card bg-warning text-white">
            <div class="card-body text-center">
                <h4 class="card-title">{{ risk_stats.get('高风险', 0) }}</h4>
                <p class="card-text">高风险</p>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card bg-info text-white">
            <div class="card-body text-center">
                <h4 class="card-title">{{ risk_stats.get('中风险', 0) }}</h4>
                <p class="card-text">中风险</p>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card bg-success text-white">
            <div class="card-body text-center">
                <h4 class="card-title">{{ risk_stats.get('低风险', 0) }}</h4>
                <p class="card-text">低风险</p>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card bg-secondary text-white">
            <div class="card-body text-center">
                <h4 class="card-title">{{ risk_stats.get('无风险', 0) }}</h4>
                <p class="card-text">无风险</p>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card bg-primary text-white">
            <div class="card-body text-center">
                <h4 class="card-title">{{ total_regions }}</h4>
                <p class="card-text">总区域</p>
            </div>
        </div>
    </div>
</div>

<!-- 选项卡导航 -->
<ul class="nav nav-tabs mb-4" id="riskTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="region-tab" data-bs-toggle="tab" data-bs-target="#region" type="button" role="tab">
            <i class="bi bi-map"></i> 区域风险等级
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="hourly-tab" data-bs-toggle="tab" data-bs-target="#hourly" type="button" role="tab">
            <i class="bi bi-clock"></i> 24小时风险分布
        </button>
    </li>
</ul>

<!-- 选项卡内容 -->
<div class="tab-content" id="riskTabsContent">
    <!-- 区域风险等级标签页 -->
    <div class="tab-pane fade show active" id="region" role="tabpanel">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="fw-bold text-muted">区域风险等级列表</h5>
            <div class="btn-group">
                <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    每页 {{ page_size_region }} 条
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="?page_region=1&page_size_region=5&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">5条/页</a></li>
                    <li><a class="dropdown-item" href="?page_region=1&page_size_region=10&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">10条/页</a></li>
                    <li><a class="dropdown-item" href="?page_region=1&page_size_region=20&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">20条/页</a></li>
                    <li><a class="dropdown-item" href="?page_region=1&page_size_region=50&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">50条/页</a></li>
                </ul>
            </div>
        </div>

        {% if region_risks and region_risks|length > 0 %}
        <div class="card shadow-sm">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="bg-primary text-white">
                        <tr>
                            <th>序号</th>
                            <th>设备名称</th>
                            <th>区域位置</th>
                            <th>风险等级</th>
                            <th>风险分数</th>
                            <th>报警次数</th>
                            <th>最后报警时间</th>
                            <th>更新时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for risk in region_risks %}
                        <tr>
                            <td class="fw-medium">{{ (page_region - 1) * page_size_region + loop.index }}</td>
                            <td>{{ risk.device_name }}</td>
                            <td>{{ risk.location }}</td>
                            <td>
                                <span class="badge
                                    {% if risk.risk_level == '超高风险' %}bg-danger
                                    {% elif risk.risk_level == '高风险' %}bg-warning
                                    {% elif risk.risk_level == '中风险' %}bg-info
                                    {% elif risk.risk_level == '低风险' %}bg-success
                                    {% else %}bg-secondary{% endif %}">
                                    {{ risk.risk_level }}
                                </span>
                            </td>
                            <td>
                                <div class="progress" style="height: 20px;">
                                    <div class="progress-bar
                                        {% if risk.risk_level == '超高风险' %}bg-danger
                                        {% elif risk.risk_level == '高风险' %}bg-warning
                                        {% elif risk.risk_level == '中风险' %}bg-info
                                        {% elif risk.risk_level == '低风险' %}bg-success
                                        {% else %}bg-secondary{% endif %}"
                                        style="width: {{ (risk.risk_score * 100)|round|int }}%">
                                        {{ (risk.risk_score * 100)|round(1) }}%
                                    </div>
                                </div>
                            </td>
                            <td>{{ risk.alarm_count }}</td>
                            <td>
                                {% if risk.last_alarm_date %}
                                    {{ risk.last_alarm_date.strftime('%Y-%m-%d %H:%M') }}
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td>{{ risk.update_time.strftime('%Y-%m-%d %H:%M') }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 区域风险分页控件 -->
        <div class="mt-4">
            <nav aria-label="区域风险分页导航">
                <ul class="pagination justify-content-center">
                    <li class="page-item {% if page_region == 1 %}disabled{% endif %}">
                        <a class="page-link" href="?page_region={{ page_region - 1 }}&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">
                            <i class="bi bi-chevron-left"></i> 上一页
                        </a>
                    </li>

                    {% if total_pages_region <= 7 %}
                        {% for p in range(1, total_pages_region + 1) %}
                            <li class="page-item {% if p == page_region %}active{% endif %}">
                                <a class="page-link" href="?page_region={{ p }}&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">{{ p }}</a>
                            </li>
                        {% endfor %}
                    {% else %}
                        {% if page_region <= 4 %}
                            {% for p in range(1, 6) %}
                                <li class="page-item {% if p == page_region %}active{% endif %}">
                                    <a class="page-link" href="?page_region={{ p }}&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">{{ p }}</a>
                                </li>
                            {% endfor %}
                            <li class="page-item disabled"><span class="page-link">...</span></li>
                            <li class="page-item"><a class="page-link" href="?page_region={{ total_pages_region - 1 }}&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">{{ total_pages_region - 1 }}</a></li>
                            <li class="page-item"><a class="page-link" href="?page_region={{ total_pages_region }}&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">{{ total_pages_region }}</a></li>
                        {% elif page_region >= total_pages_region - 3 %}
                            <li class="page-item"><a class="page-link" href="?page_region=1&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">1</a></li>
                            <li class="page-item"><a class="page-link" href="?page_region=2&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">2</a></li>
                            <li class="page-item disabled"><span class="page-link">...</span></li>
                            {% for p in range(total_pages_region - 4, total_pages_region + 1) %}
                                <li class="page-item {% if p == page_region %}active{% endif %}">
                                    <a class="page-link" href="?page_region={{ p }}&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">{{ p }}</a>
                                </li>
                            {% endfor %}
                        {% else %}
                            <li class="page-item"><a class="page-link" href="?page_region=1&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">1</a></li>
                            <li class="page-item"><a class="page-link" href="?page_region=2&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">2</a></li>
                            <li class="page-item disabled"><span class="page-link">...</span></li>
                            {% for p in range(page_region - 2, page_region + 3) %}
                                <li class="page-item {% if p == page_region %}active{% endif %}">
                                    <a class="page-link" href="?page_region={{ p }}&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">{{ p }}</a>
                                </li>
                            {% endfor %}
                            <li class="page-item disabled"><span class="page-link">...</span></li>
                            <li class="page-item"><a class="page-link" href="?page_region={{ total_pages_region - 1 }}&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">{{ total_pages_region - 1 }}</a></li>
                            <li class="page-item"><a class="page-link" href="?page_region={{ total_pages_region }}&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">{{ total_pages_region }}</a></li>
                        {% endif %}
                    {% endif %}

                    <li class="page-item {% if page_region == total_pages_region %}disabled{% endif %}">
                        <a class="page-link" href="?page_region={{ page_region + 1 }}&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly }}&page_size_hourly={{ page_size_hourly }}">
                            下一页 <i class="bi bi-chevron-right"></i>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="text-center text-muted mt-2">
                显示 {{ (page_region - 1) * page_size_region + 1 }} 到 {{ (page_region - 1) * page_size_region + region_risks|length }} 条，共 {{ total_regions }} 条记录
            </div>
        </div>
        {% else %}
        <div class="d-flex justify-content-center align-items-center" style="min-height: 300px;">
            <div class="alert alert-primary text-center p-5 rounded-3">
                <div class="mb-3">
                    <i class="bi bi-info-circle fs-1 text-primary"></i>
                </div>
                <h4 class="fw-bold">暂无区域风险数据</h4>
                <p class="mt-2 text-muted">系统中没有风险分析结果数据</p>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- 24小时风险分布标签页 -->
    <div class="tab-pane fade" id="hourly" role="tabpanel">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="fw-bold text-muted">24小时风险分布列表</h5>
            <div class="btn-group">
                <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    每页 {{ page_size_hourly }} 条
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly=1&page_size_hourly=3">3条/页</a></li>
                    <li><a class="dropdown-item" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly=1&page_size_hourly=5">5条/页</a></li>
                    <li><a class="dropdown-item" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly=1&page_size_hourly=10">10条/页</a></li>
                    <li><a class="dropdown-item" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly=1&page_size_hourly=20">20条/页</a></li>
                </ul>
            </div>
        </div>

        {% if hourly_risks and hourly_risks|length > 0 %}
        <div class="card shadow-sm">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="bg-primary text-white">
                        <tr>
                            <th>序号</th>
                            <th>设备名称</th>
                            <th>区域位置</th>
                            {% for hour in range(24) %}
                            <th class="text-center">{{ hour }}时</th>
                            {% endfor %}
                            <th>更新时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for risk in hourly_risks %}
                        <tr>
                            <td class="fw-medium">{{ (page_hourly - 1) * page_size_hourly + loop.index }}</td>
                            <td>{{ risk.device_name }}</td>
                            <td class="fw-medium">{{ risk.location }}</td>
                            {% for hour in range(24) %}
                            {% set risk_key = 'h%02d_risk' % hour %}
                            {% set risk_value = risk[risk_key] %}
                            <td class="text-center">
                                {% if risk_value > 0 %}
                                <div class="progress" style="height: 15px; width: 60px; margin: 0 auto;">
                                    <div class="progress-bar
                                        {% if risk_value >= 0.8 %}bg-danger
                                        {% elif risk_value >= 0.6 %}bg-warning
                                        {% elif risk_value >= 0.4 %}bg-info
                                        {% elif risk_value >= 0.2 %}bg-success
                                        {% else %}bg-secondary{% endif %}"
                                        style="width: {{ (risk_value * 100)|round|int }}%"
                                        title="风险值: {{ risk_value }}">
                                    </div>
                                </div>
                                <small class="text-muted">{{ (risk_value * 100)|round(0)|int }}%</small>
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            {% endfor %}
                            <td>{{ risk.update_time.strftime('%Y-%m-%d %H:%M') }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 小时风险分页控件 -->
        <div class="mt-4">
            <nav aria-label="小时风险分页导航">
                <ul class="pagination justify-content-center">
                    <li class="page-item {% if page_hourly == 1 %}disabled{% endif %}">
                        <a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly - 1 }}&page_size_hourly={{ page_size_hourly }}">
                            <i class="bi bi-chevron-left"></i> 上一页
                        </a>
                    </li>

                    {% if total_pages_hourly <= 7 %}
                        {% for p in range(1, total_pages_hourly + 1) %}
                            <li class="page-item {% if p == page_hourly %}active{% endif %}">
                                <a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly={{ p }}&page_size_hourly={{ page_size_hourly }}">{{ p }}</a>
                            </li>
                        {% endfor %}
                    {% else %}
                        {% if page_hourly <= 4 %}
                            {% for p in range(1, 6) %}
                                <li class="page-item {% if p == page_hourly %}active{% endif %}">
                                    <a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly={{ p }}&page_size_hourly={{ page_size_hourly }}">{{ p }}</a>
                                </li>
                            {% endfor %}
                            <li class="page-item disabled"><span class="page-link">...</span></li>
                            <li class="page-item"><a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly={{ total_pages_hourly - 1 }}&page_size_hourly={{ page_size_hourly }}">{{ total_pages_hourly - 1 }}</a></li>
                            <li class="page-item"><a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly={{ total_pages_hourly }}&page_size_hourly={{ page_size_hourly }}">{{ total_pages_hourly }}</a></li>
                        {% elif page_hourly >= total_pages_hourly - 3 %}
                            <li class="page-item"><a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly=1&page_size_hourly={{ page_size_hourly }}">1</a></li>
                            <li class="page-item"><a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly=2&page_size_hourly={{ page_size_hourly }}">2</a></li>
                            <li class="page-item disabled"><span class="page-link">...</span></li>
                            {% for p in range(total_pages_hourly - 4, total_pages_hourly + 1) %}
                                <li class="page-item {% if p == page_hourly %}active{% endif %}">
                                    <a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly={{ p }}&page_size_hourly={{ page_size_hourly }}">{{ p }}</a>
                                </li>
                            {% endfor %}
                        {% else %}
                            <li class="page-item"><a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly=1&page_size_hourly={{ page_size_hourly }}">1</a></li>
                            <li class="page-item"><a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly=2&page_size_hourly={{ page_size_hourly }}">2</a></li>
                            <li class="page-item disabled"><span class="page-link">...</span></li>
                            {% for p in range(page_hourly - 2, page_hourly + 3) %}
                                <li class="page-item {% if p == page_hourly %}active{% endif %}">
                                    <a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly={{ p }}&page_size_hourly={{ page_size_hourly }}">{{ p }}</a>
                                </li>
                            {% endfor %}
                            <li class="page-item disabled"><span class="page-link">...</span></li>
                            <li class="page-item"><a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly={{ total_pages_hourly - 1 }}&page_size_hourly={{ page_size_hourly }}">{{ total_pages_hourly - 1 }}</a></li>
                            <li class="page-item"><a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly={{ total_pages_hourly }}&page_size_hourly={{ page_size_hourly }}">{{ total_pages_hourly }}</a></li>
                        {% endif %}
                    {% endif %}

                    <li class="page-item {% if page_hourly == total_pages_hourly %}disabled{% endif %}">
                        <a class="page-link" href="?page_region={{ page_region }}&page_size_region={{ page_size_region }}&page_hourly={{ page_hourly + 1 }}&page_size_hourly={{ page_size_hourly }}">
                            下一页 <i class="bi bi-chevron-right"></i>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="text-center text-muted mt-2">
                显示 {{ (page_hourly - 1) * page_size_hourly + 1 }} 到 {{ (page_hourly - 1) * page_size_hourly + hourly_risks|length }} 条，共 {{ total_hourly }} 条记录
            </div>
        </div>
        {% else %}
        <div class="d-flex justify-content-center align-items-center" style="min-height: 300px;">
            <div class="alert alert-primary text-center p-5 rounded-3">
                <div class="mb-3">
                    <i class="bi bi-info-circle fs-1 text-primary"></i>
                </div>
                <h4 class="fw-bold">暂无小时风险分布数据</h4>
                <p class="mt-2 text-muted">系统中没有24小时风险分布数据</p>
            </div>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
// 页面加载完成后的一些交互
document.addEventListener('DOMContentLoaded', function() {
    // 可以在这里添加图表初始化等交互代码
    console.log('风险分析页面加载完成');

    // 保存当前激活的标签页状态
    const activeTab = localStorage.getItem('activeRiskTab');
    if (activeTab) {
        const tab = document.querySelector(`[data-bs-target="${activeTab}"]`);
        if (tab) {
            new bootstrap.Tab(tab).show();
        }
    }

    // 监听标签页切换事件
    document.querySelectorAll('#riskTabs button[data-bs-toggle="tab"]').forEach(tab => {
        tab.addEventListener('shown.bs.tab', event => {
            const target = event.target.getAttribute('data-bs-target');
            localStorage.setItem('activeRiskTab', target);
        });
    });
});
</script>
{% endblock %}